<template>
  <div class="move">
    <div class="header">标题</div>
    <div class="main">内容</div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
</script>
<style lang="less" scoped>
.move {
  width: 200px;
  height: 400px;
  border: 1px solid #f0f;
  display: flex;
  flex-direction: column;
  text-align: center;
  position: fixed;
  left: 50%;
  top: 20%;
  background: rgba(218, 233, 6, 0.199);
  .header {
    height: 40px;
    width: 100%;
    font-size: 24px;
    font-weight: 400;
    line-height: 40px;
    border-bottom: 1px solid #f0f;
    &:hover {
      cursor: move;
    }
  }
  .main {
    flex: 1;
  }
}
</style>
